<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <!-- 
        总结：
            computed和watch之间的区别：
                1.computed能完成的功能,watch都可以完成.
                2.watch能完成的功能,computed不一定能完成,例如：watch可以进行异步操作.
            两个重要的小原则：
                1.所有被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象.
                2.所有不被Vue管理的函数(定时器的回调函数/ajax的回调函数等),最好写成箭头函数,
                  这样this的指向才是vm或组件实例对象
     -->

    <div id ="app">
        姓：<input type="text" v-model="xName"><br>
        名：<input type="text" v-model="mName"><br>
        姓名：<span>{{fullName}}</span>
    </div>

    <script>
        //创建Vue实例,得到 ViewModel
        const vm = new Vue({
            el: '#app',
            data: {
                xName:'张',
                mName:'三',
                fullName:'张-三'
            },
            watch: {
                xName: {
                    handler(val){
                        this.fullName = val + '_' + this.mName
                    }
                },
                mName: {
                    handler(val){
                        this.fullName = this.xName + '_' + val
                    }
                }
            }
        });

        
    </script>
</body>
</html>